<template>
	<view class="content">
		<view class="whead">
			<view class="left backLeft">
				<view class="imgBox">
					<image src="../../static/img/back2.png" mode=""></image>
				</view>
				<view class="text">
					返回
				</view>
				
			</view>
			<view class="center logoCenter">
				订单提交
			</view>
			<view class="right">
				<view class="imgBox">
					<image src="../../static/img/dian.png" mode=""></image>
				</view>
			</view>
		</view>
<view class="app">
   <view class="wares_list">
    <view class="wares_dz">
        <view class="dz_bg">
          
        </view>
        <view class="receiver">
            
            <view class="receiver_dz">
            + 暂无收货地址，点击此处添加
            </view>
        </view>
        
    </view>
	<view class="wares_dz" style="display: none;">
	    <view class="dz_bg">
	      <image src="../../static/img/dz.png"></image>
	    </view>
	    <view class="receiver">
	        <view class="name">
	            <view class="sjr">收货人: 张三</view>
	            <view class="dh">18188889999</view>
	        </view>
	        <view class="receiver_dz">
	        收货地址:河南省郑州市金水区东风路百脑汇9楼908张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三
	        </view>
	    </view>
	    <view class="dz_bg2">
	      <image src="../../static/img/sq.png"></image>
	    </view>
	</view>
    <view class="wares_news">
        <view class="inbox">
                <view class="shop">郑州豫达联想专卖店郑州豫达联想专卖店</view>
                <view class="dn_news">
                    <view class="dn_bg">
                      <image src="../../static/img/dn2.png"></image>
                    </view>
                    <view class="dn_pz">联想轻薄笔记本 ideapad 330-15&nbsp;i3-6006/4G/128G/银</view>
                    <view class="price">
                        <view class="top">¥ 2699.00</view>
                        <view class="bottom">x1</view>
                    </view>
                </view>
        </view>
        <view class="inbox box">

                <view class="dn_news">
                    <view class="dn_bg">
                      <image src="../../static/img/dn2.png"></image>
                    </view>
                    <view class="dn_pz">联想轻薄笔记本 ideapad 330-15&nbsp;i3-6006/4G/128G/银</view>
                    <view class="price">
                        <view class="top">¥ 2699.00</view>
                        <view class="bottom">x1</view>
                    </view>
                </view>
        </view>
        <view class="inbox">
                <view class="shop">郑州宏达联想专卖店郑州豫达联想专卖店</view>
                <view class="dn_news">
                    <view class="dn_bg">
                      <image src="../../static/img/dn2.png"></image>
                    </view>
                    <view class="dn_pz">联想轻薄笔记本 ideapad 330-15 i3-6006/4G/128G/银</view>
                    <view class="price">
                        <view class="top">¥ 2699.00</view>
                        <view class="bottom">x1</view>
                    </view>
                </view>
        </view>
        <view class="inbox box">
                <view class="dn_news">
                    <view class="dn_bg">
                      <image src="../../static/img/dn2.png"></image>
                    </view>
                    <view class="dn_pz">联想轻薄笔记本 ideapad 330-15 i3-6006/4G/128G/银</view>
                    <view class="price">
                        <view class="top">¥ 2699.00</view>
                        <view class="bottom">x1</view>
                    </view>
                </view>
        </view>
        
        <view class="qt">
            <view class="ps dx">
                <view class="dx_left">配送方式</view>
                <view class="content">默认物流</view>
                <view class="jt">
                  <image src="../../static/img/yjt.png"></image>
                </view>
            </view>
            <view class="yhj dx">
                <view class="dx_left">优惠劵</view>
                <view class="content">默认优惠优先</view>
                <view class="jt">
                  <image src="../../static/img/yjt.png"></image>
                </view>
            </view>
            <view class="zf dx">
                <view class="dx_left">支付方式</view>
                <view class="content">默认余额支付</view>
                <view class="jt">
                  <image src="../../static/img/yjt.png"></image>
                </view>
            </view>
            <view class="dd dx">
                <view class="dx_left">订单备注</view>
                <view class="content">选填，请先和商家协商一致选填，请先和商家协商一致</view>
            </view>
            <view class="dd_price">
                <view class="num">共3件</view>
                <view class="js">小计:</view>
                <view class="xj">￥ 80796666</view>
            </view>
        </view>
       
    </view>
  </view>
  <view class="wares_order" style="position:fixed;bottom:0;right:0;left:0;">
        <view class="number">共3件</view>
        <view class="js">小计:</view>
        <view class="zj">￥ 80796666</view>
        <view class="tj">提交订单</view>
  </view>
</view>

</view>			
			

	</view>
</template>

<script>
	import "../../static/css/main.css"
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		text-align: left;
		height: 100%;
	}
   /* pages/list2/index.wxss */
.app{ 
  display: flex;
  flex-direction: column;
  background-color: #eeeeee;
  height: 100%;
  }
.wares_list {
  padding-top: 37rpx;
  padding-left: 14rpx;
  flex: 1;
  overflow-y: auto;
  padding-bottom: 100rpx;
}

.wares_list .wares_dz {
  width: 718rpx;
  height: 146rpx;
  background-color: #ffffff;
  border-radius: 30rpx;
  display: flex;
  flex-direction: row;
}

.wares_list .wares_dz .dz_bg image {
  width: 32rpx;
  height: 44rpx;
  margin-top: 14rpx;
  margin-left: 21rpx;
}

.wares_list .wares_dz .receiver {
  padding-top: 27rpx;
  padding-left: 16rpx;
}

.wares_list .wares_dz .receiver .name {
  display: flex;
  flex-direction: row;
}

.wares_list .wares_dz .receiver .name .sjr {
  line-height: 1em;
  width: 142rpx;
  font-size: 24rpx;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wares_list .wares_dz .receiver .name .dh {
  line-height: 1em;
  width: 143rpx;
  font-size: 23rpx;
  color: #666666;
  padding-top: 1rpx;
  margin-left: 42rpx;
}

.wares_list .wares_dz .receiver .receiver_dz {
  line-height: 1em;
  width: 560rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 38rpx;
  font-size: 24rpx;
  color: #666666;
}

.wares_list .wares_dz .dz_bg2 image {
  width: 32rpx;
  height: 32rpx;
  margin-top: 29rpx;
  margin-left: 45rpx;
}

.wares_list .wares_news {
  width: 718rpx;
  background-color: #ffffff;
  border-radius: 30rpx;
  margin-top: 20rpx;
  overflow: hidden;
}

.wares_list .wares_news .inbox {
  padding-left: 27rpx;
  padding-top: 25rpx;
  width: 100%;
  border-bottom: 2rpx solid #eeeeee;
}

.wares_list .wares_news .inbox .shop {
  width: 100%;
  font-size: 30rpx;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1em;
  padding-left: 6rpx;
  height: 30rpx;
}

.wares_list .wares_news .inbox .dn_news {
  display: flex;
  flex-direction: row;
}

.wares_list .wares_news .inbox .dn_news .dn_bg image {
  width: 159rpx;
  height: 105rpx;
  margin-top: 23rpx;
  margin-bottom: 19rpx;
}

.wares_list .wares_news .inbox .dn_news .dn_pz {
  width: 354rpx;
  font-size: 24rpx;
  color: #666666;
  padding-top: 18rpx;
  line-height: 42rpx;
  padding-left: 10rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.wares_list .wares_news .inbox .dn_news .price {
  width: 115rpx;
  margin-left: 40rpx;
  margin-top: 35rpx
}

.wares_list .wares_news .inbox .dn_news .price .top {
  font-size: 24rpx;
  color: #333333;
  line-height: 1em;
}

.wares_list .wares_news .inbox .dn_news .price .bottom {
  font-size: 24rpx;
  color: #999999;
  line-height: 1em;
  margin-top: 14rpx;
  margin-left: 95rpx;
}

.wares_list .wares_news .box {
  padding-top: 0rpx;
}

.wares_list .wares_news .qt {
  padding-left: 59rpx;
}

.wares_list .wares_news .qt .dx {
  display: flex;
  flex-direction: row;
  margin-top: 38rpx;
  align-items: center;
}

.wares_list .wares_news .qt .dx .dx_left {
  height: 30rpx;
  font-size: 28rpx;
  color: #333333;
  width: 120rpx;
  line-height: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wares_list .wares_news .qt .dx .content {
  font-size: 24rpx;
  color: #999999;
  margin-left: 44rpx;
  width: 300rpx;
  line-height: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wares_list .wares_news .qt .dx .jt image {
  width: 22rpx;
  height: 27rpx;
  margin-left: 145rpx;
}

.wares_list .wares_news .qt .dd_price {
  display: flex;
  flex-direction: row;
  margin-top: 65rpx;
  padding-bottom: 19rpx;
  justify-content: flex-end;
}

.wares_list .wares_news .qt .dd_price .num {
  font-size: 24rpx;
  color: #999999;
  margin-right: 16rpx;
}

.wares_list .wares_news .qt .dd_price .js {
  font-size: 24rpx;
  color: #666666;
  margin-right: 10rpx;
}

.wares_list .wares_news .qt .dd_price .xj {
  font-size: 24rpx;
  color: #c02127;
  margin-right: 20rpx;
}

.wares_order {
  height: 90rpx;
  background: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.wares_order .number {
  font-size: 24rpx;
  color: #999999;
  margin-right: 16rpx;
}

.wares_order .js {
  font-size: 24rpx;
  color: #666666;
  margin-right: 13rpx;
}

.wares_order .zj {
  font-size: 24rpx;
  color: #c02127;
  margin-right: 22rpx;
}

.wares_order .tj {
  border-radius: 30rpx;
  width: 180rpx;
  height: 64rpx;
  background-image: linear-gradient(259deg, #d1001b 0%, #ffb2b7 100%);
  font-size: 30rpx;
  color: #ffffff;
  line-height: 64rpx;
  text-align: center;
  margin-right: 26rpx;
}
</style>
